<template>
  <div class="app-container">
    <div class="buttons">
      <el-button type="primary" icon="el-icon-plus" @click="add"
        >新增</el-button
      >
    </div>
    <div v-loading="loading">
      <div class="list">
        <div class="sub" v-for="item in subList" :key="item.id">
          <div class="cover">
            <div class="total">
              <CommonTooltipText
                :content="item.sceneName"
                :fontSize="25"
              ></CommonTooltipText>
            </div>
            <div class="tags">
              <div v-show="item.riskLevel">
                <span>风险等级</span>
                <span>{{ $getOptionLabel(item.riskLevel, levels) }}</span>
              </div>
              <div v-show="item.weight">
                <span>权重</span>
                <span>{{ item.weight }}</span>
              </div>
            </div>
            <div class="labels">
              <span @click="seeDetail(item)">详情</span>
              <span @click="edit(item)">编辑</span>
              <span @click="addRule(item.id)">添加风险规则</span>
              <!-- <span
                @click="item.status = !item.status"
                :class="item.status ? '' : 'tingyong'"
                >{{ item.status ? "已启用" : "已停用" }}</span
              > -->
              <span @click="handleDelete(item)">删除</span>
            </div>
          </div>
          <div class="desc">
            {{ item.sceneDesc }}
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="editFlag ? '编辑风险场景' : '新增风险场景'"
      :visible.sync="dialogFormVisible"
      custom-class="dialogform"
    >
      <el-form ref="addform" :model="sceneform" :rules="rulessceneform">
        <el-form-item label="场景名称" label-width="80px" prop="sceneName">
          <!-- <el-input
            v-model="sceneform.sceneName"
            autocomplete="off"
            placeholder="请输入场景名称"
          ></el-input> -->
          <el-select v-model="sceneform.sceneName" @change="changeSceneName">
            <el-option
              v-for="item in sceneNameList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场景描述" label-width="80px" prop="sceneDesc">
          <el-input
            v-model="sceneform.sceneDesc"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="风险等级" label-width="80px" prop="riskLevel">
          <el-select v-model="sceneform.riskLevel">
            <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险类型" label-width="80px" prop="sceneType">
          <el-select v-model="sceneform.sceneType" disabled>
            <el-option
              v-for="item in sceneTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-input v-model="sceneform.sceneType" disabled placeholder="请输入内容">
          </el-input> -->
        </el-form-item>
        <el-form-item label="权重" label-width="80px" prop="weight">
          <el-slider
            v-model="sceneform.weight"
            :max="100"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitaddForm">确 定</el-button>
      </div>
    </el-dialog>
    <rule
      ref="AddDialog"
      :dialogVisible1.sync="dialogVisible1"
      :scene="true"
      @submit="submitaddruleForm"
    ></rule>
    <detail
      ref="detail"
      :detailVisble.sync="detailVisble"
      :row="curRow"
    ></detail>
  </div>
</template>

<script>
import rule from "../riskRule/rule.vue";
import detail from "./detail.vue";
import { columnConfigs } from "./columnConfigs.js";
import { addList, editList, getList, delCurRow } from "@/api/yybl/riskScene";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    rule,
    detail,
  },
  mixins: [], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {},
  data() {
    return {
      ccc: false,
      loading: false,
      colors: {
        // hex: "#194d33",
        // hex8: "#194D33A8",
        // hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        // hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        // rgba: { r: 25, g: 77, b: 51, a: 1 },
        // a: 1,
      },
      subList: [
        {
          title: "异常时间登录",
          level: "高",
          quanzhong: "60%",
          status: false,
          desction:
            "一种基于登录IP和登陆时间的异常登陆行为检测系统和方法与流程",
          id: "1",
        },
        {
          title: "异常时间登录",
          level: "高",
          quanzhong: "30%",
          status: true,
          desction:
            "一种基于登录IP和登陆时间的异常登陆行为检测系统和方法与流程",
          id: "2",
        },
        {
          title: "异常时间登录",
          level: "高",
          quanzhong: "60%",
          status: false,
          desction:
            "一种基于登录IP和登陆时间的异常登陆行为检测系统和方法与流程",
          id: "3",
        },
      ],
      levels: [
        {
          label: "高",
          value: "1",
        },
        {
          label: "中",
          value: "2",
        },
        {
          label: "低",
          value: "3",
        },
      ],
      columnConfigs,
      detailVisble: false,
      dialogVisible1: false,
      editFlag: false,
      fontOptions: [
        {
          value: "微软雅黑",
          label: "微软雅黑",
        },
        {
          value: "宋体",
          label: "宋体",
        },
        {
          value: "仿宋",
          label: "仿宋",
        },
        {
          value: "黑体",
          label: "黑体",
        },
        {
          value: "楷体",
          label: "楷体",
        },
        {
          value: "等线",
          label: "等线",
        },
      ],
      sceneform: {},
      rulessceneform: {
        // host: [
        //   { required: true, message: "请输入资源地址", trigger: "blur" },
        //   { validator: validateIpPort, trigger: "blur" },
        // ],
        sceneName: [
          { required: true, message: "请选择场景名称", trigger: "change" },
        ],
        sceneDesc: [
          { required: false, message: "请输入场景描述", trigger: "blur" },
        ],
        riskLevel: [
          { required: true, message: "请选择风险等级", trigger: "change" },
        ],
        sceneType: [
          { required: true, message: "请选择风险类型", trigger: "change" },
        ],
        weight: [{ required: true, message: "请输入权重", trigger: "blur" }],
      },
      computers: [],
      vpntypes: [],
      curRow: {},
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
      },
    };
  },
  watch: {},
  computed: {
    ...mapState("common", ["sceneTypeList", "sceneNameList"]),
  },
  methods: {
    ...mapActions("common", ["getsceneNameList"]),
    changeSceneName(val) {
      if (val == '短时间登录失败次数过多') {
        this.sceneform.sceneType = "1";
      } else {
        this.sceneform.sceneType = "2";
      }
    },
    formatTooltip(val) {
      return val / 100;
      // return `${val}%`;
    },
    seeDetail(row) {
      this.detailVisble = true;
      this.curRow = row;
      this.$nextTick(() => {
        this.$refs.detail.refresh();
      });
    },
    addRule(sceneId = undefined) {
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs.AddDialog.add(sceneId);
      });
    },
    handleChange(val) {
      console.log(val);
    },
    add() {
      this.dialogFormVisible = true;
      this.editFlag = false;
      this.$nextTick(() => {
        this.$refs?.addform?.clearValidate();
      });
      this.sceneform = {
        sceneName: "",
        sceneDesc: "",
        riskLevel: "",
        sceneType: "",
        weight: 50,
      };
      this.$refs?.addform?.clearValidate();
    },
    edit(row) {
      this.dialogFormVisible = true;
      this.editFlag = true;
      this.curRow = row;
      const { sceneName, sceneDesc, riskLevel, weight, sceneType } = row;
      this.sceneform = {
        sceneName,
        sceneDesc,
        riskLevel,
        sceneType,
        weight: Number(weight) * 100,
      };
      this.$refs?.addform?.clearValidate();
    },
    async handleDelete(row) {
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ids = [];
          if (row) ids.push(row.id);
          const res = await delCurRow({
            ids,
          });
          if (res.rescode == "200") {
            this.$message.success("删除成功");
            this.refresh();
          } else this.$message.error(res.msg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitaddForm() {
      this.$refs["addform"].validate((val) => {
        if (val) {
          const { sceneName, sceneDesc, riskLevel, sceneType, weight } =
            this.sceneform;
          let params = {
            sceneName,
            sceneDesc,
            riskLevel,
            sceneType,
            weight: weight / 100,
          };
          if (this.editFlag) {
            params.id = this.curRow.id + "";
            editList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogFormVisible = false;
                  this.$message.success("编辑成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 调用新增接口
            addList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogFormVisible = false;
                  this.$message.success("新增成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        }
      });
    },
    submitaddruleForm(val) {
      if (val == 200) {
        this.refresh();
      }
    },
    handleClose() {
      // this.dialogVisible1 = false;
    },
    handleSelectionChange() {},
    refresh() {
      this.getlists(getList, {});
    },
    // 气蒸云梦泽
    // 获取列表数据
    async getlists(getListfn, data) {
      this.loading = true;
      let params = {
        ...data,
        // pageNum: pageNum - 1 > 0 ? pageNum - 1 : 0,
        pageNum: 0,
        pageSize: 10,
      };
      try {
        const res = await getListfn(params);
        // console.log(res, 78);
        if (res.code == 200 || res.rescode == 200) {
          const { data } = res;
          // this.pagination.total = data.total || data.totalCount || 0;
          this.subList = data.rows || data.dataList || [];
          // // 如果第二页第三页第四页...数据没有，重新查询第一页的数据
          // if (this.tableData.length == 0 && pageNum != 0) {
          //   this.handlePageChange(0);
          // }
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.AddDialog.getsceneList();
          });
        } else {
          // this.pagination.total = 0;
          // this.tableData = [];
          this.loading = false;
          // this.$message.error(res.msg)明耀电军艳康佳会江斌
        }
      } catch (error) {
        this.subList = [
          {
            title: "异常时间登录",
            level: "高",
            quanzhong: "60%",
            status: false,
            desction:
              "一种基于登录IP和登陆时间的异常登陆行为检测系统和方法与流程",
            id: "1",
          },
        ];
        this.loading = false;
      }
    },
  },
  created() {
    this.refresh();
    this.getsceneNameList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
::v-deep .dialogform {
  min-width: 500px;
  max-width: 650px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.sub {
  flex: 0 0 32%;
  position: relative;
  margin-right: 1.333%;
  margin-bottom: 2%;
  // background: rgba(21, 94, 137, 0.04);
  background: rgb(64 158 255/11%);
  border: 1px solid rgb(236 236 236/60%);
  border-radius: 4px;
}

@media (max-width: 900px) {
  .sub {
    flex: 0 0 100%;
  }
}

.sub.nomargin {
  margin-right: 0;
}

.sub {
  .cover {
    position: relative;
    height: 120px;
    background: #fbfbfb !important;
    // background: rgb(64 158 255/4%);
    border-radius: 5px;
    font-size: 24px;
    text-align: center;
    line-height: 110px;
    color: #000;
    transition: all 0.2s ease-in-out;
    font-weight: 200;
    border: 1px solid rgb(232 232 232/8%);
    .total {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      width: 300px;
      margin: 0 auto;
      height: 35px;
      line-height: 35px;
      z-index: 1000;
    }
  }
  .desc {
    // box-sizing: border-box;
    width: 100%;
    color: #9c9c9c;
    // background: rgb(64 158 255/11%);
    line-height: 22px;
    padding: 5px 8px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 14px;
  }
  .labels {
    position: absolute;
    bottom: 0;
    display: flex;
    line-height: 16px;
    font-size: 14px;
    padding: 5px;
    span {
      cursor: pointer;
      padding: 3px 5px;
      // background: #4caf50;
      background-color: #409eff;
      color: #fff;
      display: inline-block;
      margin-right: 5px;
      border-radius: 4px;
      zoom: 0.8;
      font-weight: 500;
    }
    span:hover {
      background: #66b1ff;
    }
    .tingyong {
      background-color: rgb(97, 97, 97);
    }
    .tingyong:hover {
      background: rgb(143, 143, 143);
    }
  }
  .tags {
    position: absolute;
    // top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    line-height: 16px;
    font-size: 14px;
    padding: 5px;
    div {
      span:nth-child(1) {
        //   cursor: pointer;
        padding: 3px 5px;
        // background: #4caf50;
        background-color: rgb(97, 97, 97);
        color: #fff;
        display: inline-block;
        // margin-right: 5px;
        border-radius: 4px 0 0 4px;
        zoom: 0.8;
        font-weight: 500;
      }
      span:nth-child(2) {
        //   cursor: pointer;
        padding: 3px 5px;
        // background: #4caf50;
        background-color: #409eff;
        color: #fff;
        display: inline-block;
        margin-right: 5px;
        border-radius: 0 4px 4px 0;
        zoom: 0.8;
        font-weight: 500;
      }
    }
  }
  @media (max-width: 900px) {
    .tags {
      bottom: 0;
    }
  }
  @media (max-width: 1400px) {
    .tags {
      top: 0;
    }
  }
}

.sub:hover {
  box-shadow: 0 18px 32px -18px #000 !important;
  transform: translateY(-3px);
}
</style>
@/api/yybl/risksence
